<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    for (let i = 0; i < 3; i++) {
      var file = document.getElementById('f1').files[0];

      //判断类型
      if (f.type !== 'image/jpeg' && f.type !== 'image/jpg') {
        alert('只能上传 jpg 图片');
        flag = false;
        break;
      }

      //判断大小
      if (file.size > 100 * 1024) {
        alert('不能大于100kb');
      }

      //判断图片尺寸
      var img = new Image();
      img.onload = function () {
        console.log('图片原始大小 width*height', this.width, this.height);
        if (this.naturalWidth) {
          console.log('图片原始大小 naturalWidth*naturalHeight', this.naturalWidth, this.naturalHeight);
        } else {
          console.log('oImg.width*height', this.width, this.height);
        }
      }
    }
  </script>
</body>

</html>